<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>视频列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/css/layui.css}"  media="all">
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/css/bootstrap-theme.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/css/pintuer.css}">
    <link rel="stylesheet" th:href="@{/css/jquery-confirm.min.css}">
    <link rel="stylesheet" th:href="@{/css/admin.css}">
    <script type="application/javascript" th:src="@{/js/bootstrap.js}"></script>
    <script type="application/javascript" th:src="@{/js/jquery-3.5.1.js}"></script>
    <script type="application/javascript" th:src="@{/js/jquery-confirm.min.js}"></script>
    <script type="application/javascript" th:src="@{/js/layui.all.js}"></script>
    <script type="application/javascript" th:src="@{/js/layui.js}"></script>
    <script>
        var del;
        var update;
        var change;
        $(document).ready(function () {

            //改变页数
            change=function(val){
                str='#size'+val
                pageSize= $(str).val()
                title=$("#title").val()
                time=$("#time").val()
                console.log(time)
                categoryId=$("#categoryId").val()
               // console.log(  $(str).val())
               window.location.href='/video/tolist?pageSize='+pageSize+"&title="+title+"&time="+time+"&categoryId="+categoryId
            }
            $("#reset").click(function () {
                window.location.href="/category/tolist"
            })
            del=function(id){
                var str="#video"+id
                $.confirm({
                    title: '确认',
                    content: '确定要【'+$(str).html()+'】删除吗?',
                    type: 'red',
                    width:'30',
                    height:'50',
                    icon: 'icon-trash-o',
                    buttons: {
                        ok: {
                            text: '确认',
                            btnClass: 'iconfont icon-ico_commodity_defaul',
                            action: function() {
                                $.get('del/'+id,function (data) {
                                    if (data){
                                        window.location.href="/video/tolist"
                                    }
                                })


                            }
                        },
                        cancel: {
                            text: '取消',
                        }
                    }
                });
            }

            update=function (id) {
                window.location.href="/video/toupdate/"+id
            }
        })
    </script>
</head>
<body>

<!--<form method="post" action="">-->
    <div class="panel admin-panel">
        <div class="panel-head">
            <strong class="icon-reorder"> 视频列表</strong>
        </div>
        <div class="padding border-bottom">
            <form method="get" action="/video/search">
                <input type="hidden" name="opr" value="query" />
                <input type="hidden" name="currentPage" th:value="${videosPage.pageNum}" />
                <input type="hidden" name="pageSize" th:value="${videosPage.pageSize}" />
                <ul class="search" style="padding-left:10px;">
                    <li>视频名：<input type="text"
                                   name="title" id="title" class="input" th:value="${queryCondition}==null?'':${queryCondition.title}"
                                   style="width:150px; line-height:17px;display:inline-block" />
                    </li>
                    <li>
                        <div class="layui-form" >
                            <div class="layui-form-item">
                                <div class="layui-inline" >
                                    <label class="layui-form-label" style="width: 110px">日期范围</label>
                                    <div class="layui-input-inline">
                                        <input type="text" th:value="${queryCondition.time}" name="time" class="layui-input" id="time" placeholder=" - ">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>

                    <li><select id="categoryId" name="categoryId" class="input"
                                style="width:200px; line-height:17px;">
                        <option   value="0" >不限</option>
                        <option  th:selected="${queryCondition.categoryId}==${category.id}?'true':'false'" th:value="${category.id}" th:each="category:${categories}" th:text="${category.name}"></option>
                    </select></li>
                    <li><button type="submit" class="button border-main icon-search">搜索</button></li>
                </ul>
            </form>
        </div>
        <table class="table table-hover text-center">
            <t>
                <th>序号</th>
                <th>视频名称</th>
                <th>视频地址</th>
                <th>类别</th>
                <th>作者</th>
                <th>发布时间</th>
                <th>播放数</th>
                <th>点赞数</th>
                <th>状态</th>
                <th>操作</th>
            </t>
<!--            xxx.?.list list为空就不进入循环-->
                <tr th:if="${not #lists.isEmpty(videosPage)}" th:each="video,index:${videosPage?.list}">
                    <td th:text="${index.count}"></td>
                    <td  th:id="'video'+${video.id}" th:text="${video}==null?'':${video.title}"></td>
                    <td th:text="${video.url}"></td>
                    <td th:text="${video.category}==null?'':${video.category.name}"></td>

                    <td th:text="${video.user.account}"></td>
                    <td th:text="${video.pubTime}"></td>
                    <td th:text="${video.viewNum}"></td>
                    <td th:text="${video.praiseNum}"></td>
                    <td th:text="${video.status}==true?'禁用':'未禁用'"></td>
                    <td>
                        <div class="button-group">
                            <a class="button border-main" th:onclick="'update('+${video.id}+')'"><span
                                    class="icon-edit"></span> 修改</a> <a  th:onclick="'del('+${video.id}+')'" class="button border-red"

                                                                       ><span
                                class="icon-trash-o"></span> 删除</a>
                        </div>
                    </td>
                </tr>
            <tr >
                <td colspan="8" style="text-align: center"  th:if="${videosPage.list}==null">数据为空</td>
            </tr>

        </table>
    </div>
</form>
<nav style="text-align: center" aria-label="Page navigation">
    <ul class="pagination">
        <li th:class="${videosPage.pageNum}==1?'previous disabled':''" >
            <a th:href="@{/video/tolist(currentPage=${videosPage.pageNum}-1,pageSize=${videosPage.pageSize})}" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
            </a>
        </li>
        <li th:class="${videosPage.pageNum==num?'active':''}" th:each="num:${#numbers.sequence(1,videosPage.pages)}"><a th:href="@{/video/tolist(currentPage=${num},pageSize=${videosPage.pageSize},title=${queryCondition.title},categoryId=${queryCondition.categoryId},time=${queryCondition.time})}" th:text="${num}" ></a></li>
        <li th:class="${videosPage.pages}==${videosPage.pageNum}?'previous disabled':''">
            <a th:href="@{/video/tolist(currentPage=${videosPage.pageNum}+1,pageSize=${videosPage.pageSize})}" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
            </a>
        </li>


    </ul>

</nav>
<div style="text-align: center">
    每页大小:
        <select  onchange="change(this.options[this.selectedIndex].value)">
                  <option  th:each="num:${#numbers.sequence(1,5)}" th:id="'size'+${num}" th:value="${num}" th:selected="${num}==${videosPage.pageSize}?'true':'false'" th:text="${num}"></option>
        </select>


</div>

</body>
</html>
<script>
    layui.use('laydate', function(){
        var laydate = layui.laydate;

        //常规用法
        laydate.render({
            elem: '#test1'
        });

        //国际版
        laydate.render({
            elem: '#test1-1'
            ,lang: 'en'
        });

        //年选择器
        laydate.render({
            elem: '#test2'
            ,type: 'year'
        });

        //年月选择器
        laydate.render({
            elem: '#test3'
            ,type: 'month'
        });

        //时间选择器
        laydate.render({
            elem: '#test4'
            ,type: 'time'
        });

        //日期时间选择器
        laydate.render({
            elem: '#test5'
            ,type: 'datetime'
        });

        //日期范围
        laydate.render({
            elem: '#time'
            ,range: true
        });

        //年范围
        laydate.render({
            elem: '#test7'
            ,type: 'year'
            ,range: true
        });

        //年月范围
        laydate.render({
            elem: '#test8'
            ,type: 'month'
            ,range: true
        });

        //时间范围
        laydate.render({
            elem: '#test9'
            ,type: 'time'
            ,range: true
        });

        //日期时间范围
        laydate.render({
            elem: '#test10'
            ,type: 'datetime'
            ,range: true
        });

        //自定义格式
        laydate.render({
            elem: '#test11'
            ,format: 'yyyy年MM月dd日'
        });
        laydate.render({
            elem: '#test12'
            ,format: 'dd/MM/yyyy'
        });
        laydate.render({
            elem: '#test13'
            ,format: 'yyyyMMdd'
        });
        laydate.render({
            elem: '#test14'
            ,type: 'time'
            ,format: 'H点m分'
        });
        laydate.render({
            elem: '#test15'
            ,type: 'month'
            ,range: '~'
            ,format: 'yyyy-MM'
        });
        laydate.render({
            elem: '#test16'
            ,type: 'datetime'
            ,range: '到'
            ,format: 'yyyy年M月d日H时m分s秒'
        });

        //开启公历节日
        laydate.render({
            elem: '#test17'
            ,calendar: true
        });

        //自定义重要日
        laydate.render({
            elem: '#test18'
            ,mark: {
                '0-10-14': '生日'
                ,'0-12-31': '跨年' //每年的日期
                ,'0-0-10': '工资' //每月某天
                ,'0-0-15': '月中'
                ,'2017-8-15': '' //如果为空字符，则默认显示数字+徽章
                ,'2099-10-14': '呵呵'
            }
            ,done: function(value, date){
                if(date.year === 2017 && date.month === 8 && date.date === 15){ //点击2017年8月15日，弹出提示语
                    layer.msg('这一天是：中国人民抗日战争胜利72周年');
                }
            }
        });

        //限定可选日期
        var ins22 = laydate.render({
            elem: '#test-limit1'
            ,min: '2016-10-14'
            ,max: '2080-10-14'
            ,ready: function(){
                ins22.hint('日期可选值设定在 <br> 2016-10-14 到 2080-10-14');
            }
        });

        //前后若干天可选，这里以7天为例
        laydate.render({
            elem: '#test-limit2'
            ,min: -7
            ,max: 7
        });

        //限定可选时间
        laydate.render({
            elem: '#test-limit3'
            ,type: 'time'
            ,min: '09:30:00'
            ,max: '17:30:00'
            ,btns: ['clear', 'confirm']
        });

        //同时绑定多个
        lay('.test-item').each(function(){
            laydate.render({
                elem: this
                ,trigger: 'click'
            });
        });

        //初始赋值
        laydate.render({
            elem: '#test19'
            ,value: '1989-10-14'
            ,isInitValue: true
        });

        //选中后的回调
        laydate.render({
            elem: '#test20'
            ,done: function(value, date){
                layer.alert('你选择的日期是：' + value + '<br>获得的对象是' + JSON.stringify(date));
            }
        });

        //日期切换的回调
        laydate.render({
            elem: '#test21'
            ,change: function(value, date){
                layer.msg('你选择的日期是：' + value + '<br><br>获得的对象是' + JSON.stringify(date));
            }
        });
        //不出现底部栏
        laydate.render({
            elem: '#test22'
            ,showBottom: false
        });

        //只出现确定按钮
        laydate.render({
            elem: '#test23'
            ,btns: ['confirm']
        });

        //自定义事件
        laydate.render({
            elem: '#test24'
            ,trigger: 'mousedown'
        });

        //点我触发
        laydate.render({
            elem: '#test25'
            ,eventElem: '#test25-1'
            ,trigger: 'click'
        });

        //双击我触发
        lay('#test26-1').on('dblclick', function(){
            laydate.render({
                elem: '#test26'
                ,show: true
                ,closeStop: '#test26-1'
            });
        });

        //日期只读
        laydate.render({
            elem: '#test27'
            ,trigger: 'click'
        });

        //非input元素
        laydate.render({
            elem: '#test28'
        });

        //墨绿主题
        laydate.render({
            elem: '#test29'
            ,theme: 'molv'
        });

        //自定义颜色
        laydate.render({
            elem: '#test30'
            ,theme: '#393D49'
        });

        //格子主题
        laydate.render({
            elem: '#test31'
            ,theme: 'grid'
        });


        //直接嵌套显示
        laydate.render({
            elem: '#test-n1'
            ,position: 'static'
        });
        laydate.render({
            elem: '#test-n2'
            ,position: 'static'
            ,lang: 'en'
        });
        laydate.render({
            elem: '#test-n3'
            ,type: 'month'
            ,position: 'static'
        });
        laydate.render({
            elem: '#test-n4'
            ,type: 'time'
            ,position: 'static'
        });
    });
</script>
